import React, { Component } from "react";

class App extends Component {
  // constructor() {
  //   super();
  // 官网推荐的方式
  // this.add = this.add.bind(this);
  // }

  state = {
    count: 1,
  };

  // add = (num) => {
  //   // this.setState((prevState) => {
  //   //   return {
  //   //     count: prevState.count + num,
  //   //   };
  //   // });
  //   console.log(num);
  // };

  // 函数柯里化 curry
  add = (num) => {
    return (e) => {
      console.log(num, e);
    };
  };
  // add = (num) => () => {
  //   console.log(num);
  // };

  render() {
    return (
      <>
        <h3>事件</h3>
        <span>{this.state.count}</span>
        {/* bind会产生一个新函数，新函数不会自动执行，bind的第二个参数会作为新函数的第一个参数 */}
        {/* <button onClick={this.add.bind(this, 5)}>btn</button>
        <button onClick={this.add.bind(this, 8)}>btn</button> */}

        {/* <button onClick={() => this.add(5)}>btn</button> */}

        <button onClick={this.add(5)}>btn</button>
      </>
    );
  }
}

/*
  this指向问题
    1. 在事件的内联里面使用bind
      不推荐，bind会产生一个新函数，影响性能
    2. 在constructor构造器里面使用bind: this.xxx = this.xxx.bind(this);
      推荐，写起来麻烦
    3. 使用箭头函数的方式
      推荐

  传参问题
    1. 在事件的内联里面使用bind
      不推荐，bind会产生一个新函数，影响性能
    2. 使用内联的箭头函数
      每次调用的时候都会产生一个看似一样的函数，但是依旧会消耗内存
    3. 函数柯里化
*/

export default App;
